<template>
  <div class="labelManage">
    <div class="topbox">
      <el-form ref="form" label-width="80px" label-position="left">
          <el-row :gutter="20">
              <el-col :span="5">
                <el-form-item label="用电企业">
                  <FilterSelect ref="jianzhuqun" 
                  :optionlist="options" 
                  :valuekey="{name:'orgName',value:'orgNo'}" 
                  @changeselect="changeqiye" 
                  :defaultvalue="orgNo"
                  ></FilterSelect>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="标签">
                  <el-input
                    v-model="labelName"
                    placeholder="输入标签"
                    size="small"
                    style="width: 100%"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="14" style="text-align: right;">
                <el-form-item label="">
                  <el-button size="small" @click="reset">重 置</el-button>
                  <el-button type="primary" size="small" @click="getlist">查 询</el-button>
                </el-form-item>
              </el-col>
          </el-row>
      </el-form>
    </div>
    <div class="bodybox">
      <div class="titlebox">
        <div>
          <el-button
            type="primary"
            size="small"
            @click="$refs.Dialogref.dialogVisible = true"
            ><i class="el-icon-plus"></i> 新 增</el-button
          >
        </div>
        <div>
          <TopTile
            @command="command"
            @daochu="daochu"
            @shuaxin="shuaxin"
          ></TopTile>
        </div>
      </div>
      <div class="table">
        <TableColumn
          ref="tabledata"
          :tableData="tableData"
          :tableConfig="tableConfig"
          :issize="issize"
        >
          <el-table-column
            prop="address"
            label="操作"
            align="center"
            width="200"
          >
            <template #default="{ row }">
              <el-button type="text" @click="upbiaoqian(row)">修改</el-button>
              <el-button type="text" @click="upstatus(row)">{{ row.labelStatus==1?'停用':'启用' }}</el-button>
              <el-button type="text" @click="dellist(row)">删除</el-button>
            </template>
          </el-table-column>
        </TableColumn>
        <Dialog :options="options"  ref="Dialogref" @togetlist="getlist"></Dialog>
      </div>
      <!-- 底部分页 -->
      <div class="fenye">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page.sync="pages.pageNo"
          :page-size="15"
          @current-change="getlist"
          :total="+totalCount"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import FilterSelect from '@/components/FilterSelect'
import {getbiaoqianlistapi,postdelbiaoqianapi,postupdatestatusapi} from '@/api/system/labelManage'
import { getleftlistapi } from '@/api/iot'
import Dialog from './dialog.vue'
import TopTile from '@/components/TopTitle/index.vue'
import TableColumn from '@/components/Table/index.vue'
import { exportexcel } from '@/utils/excel'
export default {
  name: 'CallPoliceIndex',
  components: {
    Dialog,
    TopTile,
    TableColumn,
    FilterSelect
  },
  data() {
    return {
      orgNo: '',
      issize: 'medium',
      labelName: '',
      options: [],
      tableData: [],
      pages: {
        pageNo: 1,
        pageSize:15
      },
      totalCount: '',

      tableConfig: [
        { label: '序号', type: 'index', center: 'center', width: '100' },
        { label: '标签编号', prop: 'labelId' },
        { label: '标签名称', prop: 'labelName' },
        {
          label: '业务类型', prop: 'businessType',
          formatter: (row, column, cellValue, index) => {
            return cellValue=='01'?'配电管理':cellValue=='02'?'能耗管理':cellValue=='03'?'光伏管理':cellValue=='04'?'微电网管理':'计费管理'
          }
         },
        {
          label: '所属企业', prop: 'orgNo',
          formatter: (row, column, cellValue, index) => {
            return this.options.find(ele=>ele.orgNo==cellValue).orgName
          }
         },
        {
          label: '标签状态', prop: 'labelStatus',
          formatter: (row, column, cellValue, index) => {
            return cellValue==1?'启用':'停用'
          }
        },
        { label: '标签描述', prop: 'labelDesc' },
        { label: '维护日期', prop: 'maintainDate', center: 'center' }
      ],
    }
  },

  async mounted() {
    const {data: { list }} = await getleftlistapi()
    this.options = list
    this.orgNo=list[0].orgNo
    this.getlist()
  },

  methods: {
    async getlist() {
      this.$refs.tabledata.loading=true
      const { data: { list,totalCount } } = await getbiaoqianlistapi({ pageNo: this.pages.pageNo - 1, pageSize: this.pages.pageSize, orgNo: this.orgNo, labelName: this.labelName })
      const array = list.map(item => {
        const {labelStatus,businessType,...obj}=item
        return {
          ...obj,
          labelStatus: item.labelStatus == '停用' ? '0' : '1',
          businessType:item.businessType=='配电管理'?'01':item.businessType=='能耗管理'?'02':item.businessType=='光伏管理'?'03':item.businessType=='微电网管理'?'04':'05'
        }
      })
      this.tableData=array
      this.totalCount = totalCount
      this.$refs.tabledata.loading=false
    },
    changeqiye(val) {
      this.$set(this,'orgNo',val)
    },
    // 修改标签
    upbiaoqian(row) {
      // this.$refs.Dialogref.dialogVisible = true
      this.$refs.Dialogref.toupdate(row)
    },
    // 删除标签
    dellist(row) {
      this.$confirm('此操作将永久删除该标签, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await postdelbiaoqianapi(row.id)
          this.$message({type: res.code == 200 ? 'success' : 'warning',message: res.code == 200 ? '删除成功':res.message})
          this.getlist() 
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 修改状态
    upstatus(row) {
      this.$confirm(`此操作将 ${row.labelStatus==1?'停用':'启用'} 该标签, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await postupdatestatusapi({ id:row.id,labelStatus:row.labelStatus})
          this.$message({type: res.code == 200 ? 'success' : 'warning',message: res.code == 200 ? '修改成功':res.message})
          this.getlist() 
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
    },
    // 重置
    reset() {
      this.labelName=''
      this.orgNo = this.options[0].orgNo
      this.getlist()
    },
    // 调节表格密度
    command(val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
    // 导出
    daochu() {
      exportexcel('/sst-microservice-biz/sst/tag/management/export',{orgNo: this.orgNo, labelName: this.labelName},'标签管理')
    },
    // 刷新列表
    shuaxin() {
      this.getlist()
      this.$message.success('列表刷新成功')
    }
  }
}
</script>
<style lang="scss" scoped>
.labelManage {
  padding: 10px;
  height: 100%;
  background-color: #f1f1f1;
  .topbox {
    height: 80px;
    padding:20px;
    background-color: #fff;
    margin-bottom: 10px;
  }
  .bodybox {
    padding: 20px;
    height: calc(100% - 90px);
    background-color: #fff;
    .titlebox {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
    }
    .table {
      height: 90%;
    }
    .fenye{
      text-align: right;
      margin-top: 10px;
    }
  }
}
</style>
